"use strict";
var Hotspot = function(markingPos) {
  this.sliderMin = 0;
  this.sliderMax = 5000;
  this.markingPos = markingPos;
};

Hotspot.prototype = {

  createRangeSlider(range) {

    $(range).ionRangeSlider({
      min     : this.sliderMin,
      max     : this.sliderMax,
      from    : 0,
      to      : 0,
      type    : 'double',
      step    : 1,
      prefix  : '', //单位
      prettify: this.prettifyTime.bind(this),
      grid : true,
      grid_snap: false,
      grid_num: 10,
      onChange: function(data) {
        console.log("from: "+data.from);
        console.log("to: "+data.to);
        setHotspotDisplayTime(data.from, data.to);
      }
    });

  },

  prettifyTime: function(n) {
    return Math.round(n / 100) + ":" + this.addPreZero(n % 100);
  },

  addPreZero: function(num) {
    return ('000000000' + num).slice(-2);
  },

  setHotspotInfo: function(data) {
    $('#nameInput').val(data.barName);
    $('#hotspotId').html(data.id);
  },

  setHotspotPosition: function(lng, lat) {
    $('#longitudeInput').val(lng);
    $('#latitudeInput').val(lat);
  },

  setHotspotDisplayTime: function(showTime, hideTime) {
    var id = new Number($('#hotspotId').html());
    var index = this.getItemIndex(id);
    this.markingPos.marking[index].event.showTime = showTime;
    this.markingPos.marking[index].event.hideTime = hideTime;
    $('#showTimeInput').val(this.prettifyTime(showTime));
    $('#hideTimeInput').val(this.prettifyTime(hideTime));
  },

  setHotspotJumpTime: function(toTime) {
    var id = new Number($('#hotspotId').html());
    var index = this.getItemIndex(id);
    this.markingPos.marking[index].event.toTime = toTime;
    $('#timeInput').val(this.prettifyTime(toTime));
  },

  getTime: function() {
    var timeStr = $('#timeInput').val();
    var time = 0;
    if(timeStr.indexOf(":") >= 0) {
      var temp = timeStr.split(":");
      time = new Number(temp[0]) * 100 + new Number(temp[1]);
    }

    if(time < this.sliderMin) {
      time = this.sliderMin;
    }
    else if(time > this.sliderMax) {
      time = this.sliderMax;
    }

    return time;
  },

  getNewId: function() {
    var result = 0;
    for(var i=0; i<this.markingPos.marking.length; i++) {
      if(this.markingPos.marking[i].id > result) {
        result = this.markingPos.marking[i].id;
      }
    }

    return result + 1;
  },

 getItemIndex: function(id) {
    var result;
    for(var i=0; i<this.markingPos.marking.length; i++) {
      if(this.markingPos.marking[i].id == id) {
        result = i;
        break;
      }
    }

    return result;
  },

  getItemData: function(id) {
    var result;
    this.markingPos.marking.forEach(function (item, index) {
      if(item.id == id) {
        result = item;
      }
    })

    return result;
  },

  itemSelected: function(data,callback) {
    this.showHotspotDetail(data);
    this.selectMarker(data.id,callback);
  },

  showHotspotDetail: function(data) {
    this.setHotspotInfo(data);
    this.setHotspotPosition(data.pos.longitude, data.pos.latitude);
    this.setHotspotDisplayTime(data.event.showTime, data.event.hideTime);
    this.setHotspotJumpTime(data.event.toTime);

    var slider = $("#range_1").data("ionRangeSlider");
    slider.update({
        from: data.event.showTime,
        to: data.event.hideTime
    });
    this.resetSliderMark();
   
    $('#video_hotspot_detail').show();
    $('#video_slider').show();
  },

  hideHotspotDetail: function(callback) {
    this.unSelectMarker(callback);
    $('#video_hotspot_detail').hide();
    $('#video_slider').hide();
  },

  hotspotDelete: function(callback) {
    var id = new Number($('#hotspotId').html());
    this.removeMarker(id,callback);
    $('#video_hotspot_detail').hide();
    $('#video_slider').hide();
  },

  resetSliderMark: function() {
    var time = this.getTime();

    if($("#sliderMark").length <= 0) {
      var html = '<span id="sliderMark" class="sliderMark" style="left:0%">00:00</span>';
      $("#video_slider span").first().append(html);
    }

    $("#sliderMark").css("left", time * 98.0 / this.sliderMax + '%');
    $("#sliderMark").html(this.prettifyTime(time));
  },

  removeMarker: function(id,callback) {
    var index = this.getItemIndex(id);
    this.markingPos.marking.splice(index, 1);
    
    if (callback) {
      callback(index);
    }
  },

  unSelectMarker: function(callback) {
    if (callback) {
      callback();
    }
  },
  selectMarker: function(id,callback) {
    if (callback) {
      callback(id);
    }
  },
};



